<template>
  <div class="wrap">
    <!-- 页头区域 -->
    <!-- <div class="wrap_head head_white"></div> -->
    <!-- 页头区域 -->
    <!-- <div class="header-seat"></div> -->
    <div class="null_content">
      <!-- 内容区域 -->
      <div class="f">
        <!-- <div class="banner">
          <div class="f-content"><h1>企业动态</h1></div>
        </div> -->
        <div class="crumbs-1">
          <div class="f-content">
            <a @click="openHomePage">首页 </a
            ><img :src="require('@/assets/df4s4.png')" />
            <a @click="openNewstPage">新闻中心</a
            ><img v-bind:src="require('@/assets/df4s4.png')" />
            <a>新闻列表</a>
          </div>
        </div>
        <div class="page-main">
          <div class="f-content">
            <div class="ul-1" v-for="(item, index) in newsList" :key="index">
              <a class="li" @click="newsDetailTo(item.id)">
                <img :src="item.imageUrl" class="img" />
                <div class="left">
                  <h3>{{ item.title }}</h3>
                  <h4>{{ item.date }}</h4>
                  <p>
                    {{ item.desc }}
                  </p>
                </div>
                <div class="both"></div>
              </a>
            </div>
            <div href="javascript:void(0);" class="button-1">
              <span v-on:click="click" class="look-more">查看更多</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from  "@/utils/HttpUtils";
import { getNewsList } from "@/api/news";

export default {
  data() {
    return {
      narrow: require("@/assets/df4s4.png"),
      newsList: [
        {
          id: "1",
          // linkUrl: "https://www.tencent.com/zh-cn/articles/2201156.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2021/05/19/9a9462b6aa7f17be9130743e77dd1b83.jpg!article.cover",
          imageTitle: "",
          title: "数字化展览︰云端一览敦煌莫高窟文物",
          desc:
            "腾讯携手敦煌研究院和法国吉美国立亚洲艺术博物馆宣布启动“数字藏经洞”项目，探索敦煌莫高窟文物数字化保护与弘扬的新路径。",
          date: "2021.05.19",
        },
        {
          id: "2",
          // linkUrl: "https://www.tencent.com/zh-cn/articles/2201109.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2021/01/19/0a410c4cf74dc427167b071b46d89381.png!article.cover",
          imageTitle: "",
          title: "微信持续开拓生态 激发商业潜能 赋能品牌新机遇",
          desc:
            "&quot;2021微信公开课PRO”在广州正式开课，正值微信上线十周年，微信生态持续发展，包括小程序在内的核心功能为用户和企业创造了更多价值。",
          date: "2021.05.19",
        },
        {
          id: "3",
          // linkUrl: "https://www.tencent.com/zh-cn/articles/2201100.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2020/12/11/04d1ddf23060fd3689f0a5228b04539d.png!article.cover",
          imageTitle: "",
          title: "腾讯游戏开发者大会 助力新一代游戏开发者",
          desc:
            "连续4晚、25场精彩演讲、近万人参与，腾讯与游戏开发者共迎行业变革新机遇。",
          date: "2021.05.19",
        },
      ],
      pageIndex: 0,
    };
  },
  methods: {
    newsDetailTo(id) {
      console.log("打开文章id :" + id);
      this.$router.push({ path: "/newsHome/news-detail", query: { id: id } });
    },

    openHomePage() {
      this.$router.push({ name: "home" });
    },
    openNewstPage() {
      this.$router.push({ name: "news" });
    },
    click() {
      console.log("加载下一页数据。。。");
      //请求后端分页接口

      this.getRequestPage(1);
    },
    //请求分页接口
    getRequestPage(pageNo) {
      let pageUrl = "/news/list";
      let params = {};
      pageNo = this.pageIndex;
      console.log("请求页码:" + pageNo);
      params.pageNo = pageNo;
      params.pageSize = 10;


      params.pageSize = 1;
      params.newsType = "";
      getNewsList(params.newsType, params.pageNo, params.pageSize).then(
        (response) => {
          // console.log(response.data);
          this.newsList = response.data.records;
        }
      );
      // var data = axios.get(pageUrl, params);
      // console.log(data);
      // this.newsList.push();
      this.pageIndex = this.pageIndex + 1;
    },
  },
  mounted() {
    this.pageIndex = 1;
    this.getRequestPage(this.pageIndex);
  },
};
</script>

<style scoped>
@import "~@/assets/css/base.css";
@import "~@/assets/css/index.css";
@import "~@/assets/css/base-2.css";
@import "~@/assets/css/media.css";
.look-more {
  cursor: pointer;
}
</style>